<%@ page import="com.lft.examsys.util.DateTimeUtil" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<head>
	<title>个人中心</title>
	<jsp:include page="/layout/_imports.jsp"></jsp:include>
	<link rel="stylesheet" href="/css/personal.css">
</head>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="/layout/_nav.jsp"></jsp:include>
<body>
	<div class="row personal_container" style="margin: 0 auto;">
		<div class="col-10" >
			<form action="/user/update" method="post" id="update_user" enctype="multipart/form-data">
				<div class="main_params">
					<h1>您好，${user.username}</h1>
					<img src='${user.icon !=null ? user.icon : "/img/upload.jpg"}' alt="" class="user_icon">
					<input type="file" id="user_select_icon" value="" title="点击我更换头像" name="userIcon" onchange="imgToBase64">
				</div>
				<div class="other_params">
					<span class="param_left">原密码：</span>
					<input type="password" name="prePwd" id="pre_password" class="user_password"/>
					<br/>
					<span class="param_left">新密码：</span>
					<input type="password" name="newPwd" id="new_password" class="user_password"/>
					<br/>
					<span class="param_left">出生年月：</span>
					<input type="date" name="birthdate" id="birthdate" class="user_password" value="2020-08-08"/>
					<br/>
					<span class="param_left">就读学校：</span>
					<input type="text" name="birthdate" id="school" class="user_password" value="成都信息工程大学"/>
					<br/>
					<span class="param_left">学历：</span>
					<select name="birthdate" id="education">
						<option value="0">初中</option>
						<option value="1">高中</option>
						<option value="2">大专</option>
						<option value="3" selected>本科</option>
						<option value="4">研究生</option>
						<option value="5">博士</option>
					</select>
					<br/>
					<span class="param_left">QQ：</span>
					<input type="text" name="birthdate" id="qq_number" class="user_password" value="1342054680"/>
				</div>
				<div id="err_msg">
					<span style="color: red;display: block;">${errMsg}</span>
					<span style="color: red;display: block;">${infoMsg}</span>
				</div>
			</form>
		</div>
		<div class="col-2">
			<button type="button" class="btn btn-danger" id="submit_form" onclick="checkForm()">提交</button>
			<button type="button" class="btn btn-secondary">取消</button>
		</div>
	</div>

	<script>


		var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
		var alertTrigger = document.getElementById('submit_form')

		$("#user_select_icon").change(function (e) {
			imgToBase64(e);
		})

		function imgToBase64(e) {
			let url = URL.createObjectURL(e.target.files[0])
			let image = new Image()
			image.src = url
			image.onload = () => {
				const canvas = document.createElement('canvas')
				const context = canvas.getContext('2d')
				const imageWidth = image.width
				const imageHeight = image.height
				canvas.width = imageWidth
				canvas.height = imageHeight
				context.drawImage(image, 0, 0, imageWidth, imageHeight)
				let imgUrl = canvas.toDataURL('image/jpeg') //图片的base64地址
				$('.user_icon').attr("src",imgUrl)
			}
		}

		function checkForm() {
			let pre_pwd = $("#pre_password").val()
			let new_pwd = $("#new_password").val()
			var new_icon = $("#user_select_icon").val()
			if (pre_pwd !== "" && new_pwd !== "" || new_icon !== "") {
				$("#update_user").submit()
			} else {
				alert("请提交要修改的个人信息！")
			}
		}

		$(".user_password").bind("input propertychange", function () {
			console.log(1230);
			var pre_pwd = $("#pre_password").val()
			var new_pwd = $("#new_password").val()
			if (pre_pwd === new_pwd && pre_pwd !=="" && new_pwd !== "") {
				$("#err_msg").html("原密码与新密码不能相同！！")
			} else {
				$("#err_msg").html("")
			}
		})
	</script>
</body>
</html>
